<template>
  <div style="height: 100%">
    <index-aside
      class="index-aside"
      v-if="'vertical' == 'vertical'"
    ></index-aside>
    <el-main
      :style="
        'vertical' == 'vertical'
          ? {
              minHeight: '100%',
              padding: '0',
              margin: '0 0 0 190px',
              // backgroundImage:
              //   'url(http://codegen.caihongy.cn/20220804/febccfdcc12347f0afccab7938e90a2e.png)',
              // backgroundImage: '../../assets/img/zhelixiaoxiaomen.jpg',
              backgroundImage:
                'url(' + require('../../assets/img/xiashailovezheli.jpg') + ')',
              display: 'block',
              backgroundSize: '100% 100%',
              position: 'relative',
            }
          : { minHeight: '100%', margin: '0', position: 'relative' }
      "
    >
      <index-header class="index-header"></index-header>
      <index-aside
        v-if="'vertical' == 'horizontal'"
        class="index-aside"
        :style="{
          width: '100%',
          borderColor: '#efefef',
          borderStyle: 'solid',
          background: '#304156',
          borderWidth: '0 0 1px 0',
          height: 'auto',
        }"
      ></index-aside>
      <bread-crumbs :title="title" class="bread-crumbs"></bread-crumbs>
      <router-view class="router-view"></router-view>
    </el-main>
  </div>
</template>

<script>
import IndexAside from '@/components/index/IndexAsideStatic'
import IndexHeader from '@/components/index/IndexHeader'
import menu from '@/utils/menu'
export default {
  components: {
    IndexAside,
    IndexHeader,
  },
  data() {
    return {
      menuList: [],
      role: '',
      currentIndex: -2,
      itemMenu: [],
      title: '',
    }
  },
  mounted() {
    let menus = menu.list()
    this.menuList = menus
    this.role = this.$storage.get('role')
  },
  created() {
    this.init()
    console.log(console.log(this.$route.path))
  },
  methods: {
    init() {
      this.$nextTick(() => {})
    },
    menuHandler(menu) {
      this.$router.push({
        name: menu.tableName,
      })
      this.title = menu.menu
    },
    titleChange(index, menus) {
      this.currentIndex = index
      this.itemMenu = menus
      console.log(menus)
    },
    homeChange(index) {
      this.itemMenu = []
      this.title = ''
      this.currentIndex = index
      this.$router.push({
        name: 'home',
      })
    },
    centerChange(index) {
      this.itemMenu = [
        {
          buttons: ['新增', '查看', '修改', '删除'],
          menu: '修改密码',
          tableName: 'updatePassword',
        },
        {
          buttons: ['新增', '查看', '修改', '删除'],
          menu: '个人信息',
          tableName: 'center',
        },
      ]
      this.title = ''
      this.currentIndex = index
      this.$router.push({
        name: 'home',
      })
    },
  },
}
</script>
<style lang="scss" scoped>
a {
  text-decoration: none;
  color: #555;
}

a:hover {
  background: #00c292;
}

.el-main {
  padding: 0;
  display: block;
  // background-image: '../../assets/img/zhelixiaoxiaomen.jpg';
}

.bread-crumbs {
  padding: 10px 20px;
  margin: 85px auto 0;
  border-color: #3e4b4a;
  border-radius: 20px;
  border-width: 0 0 2px 0;
  background: linear-gradient(
    to bottom,
    #b8c3db 0%,
    #b1c8fa 10%,
    rgba(152, 196, 238, 0.85) 20%,
    rgba(121, 203, 250, 0.9) 35%,
    rgba(116, 198, 245, 0.9) 65%,
    rgba(152, 196, 238, 0.85) 80%,
    #b1c8fa 90%,
    #b8c3db 100%
  );
  width: calc(100% - 40px);
  border-style: solid;
}

.index-header {
  padding: 8px 20px;
  align-items: center;
  top: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    #6695fa 0%,
    #799ff1 10%,
    rgba(152, 196, 238, 0.85) 20%,
    rgba(255, 255, 255, 0.9) 35%,
    rgba(255, 255, 255, 0.9) 65%,
    rgba(152, 196, 238, 0.85) 80%,
    #7da5fc 90%,
    #6695fa 100%
  );
  display: flex;
  width: 100%;
  position: fixed;
  justify-content: center;
  font-weight: 550;
  z-index: 1004;
}

.index-aside {
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.302);
  padding: 0 0 100px;
  overflow: hidden;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 1);
  bottom: 0;
  width: 190px;
  font-size: 0px;
  position: fixed;
  height: 100%;
  z-index: 1001;
}

.nav-list {
  width: 100%;
  margin: 0 auto;
  text-align: left;
  margin-top: 20px;

  .nav-title {
    display: inline-block;
    font-size: 15px;
    color: #333;
    padding: 15px 25px;
    border: none;
  }

  .nav-title.active {
    color: #555;
    cursor: default;
    background-color: #fff;
  }
}

.nav-item {
  margin-top: 20px;
  background: #ffffff;
  padding: 15px 0;

  .menu {
    padding: 15px 25px;
  }
}

.detail-form-content {
  background: transparent;
}
</style>
